<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="blog/amaze/header::head-fragment"></head>
<body id="blog" th:style="'background-image: url(' + ${themeConfigurations.bgImg} + ');background-size: cover;background-attachment: fixed;'">
<div th:replace="blog/amaze/header::nav-fragment"></div>
<div th:replace="blog/amaze/header::header-fragment"></div>
<div class="am-g am-g-fixed blog-fixed">
    <div th:replace="blog/amaze/blog-list::blog-list-fragment"></div>
    <div th:replace="blog/amaze/side::side-fragment"></div>
</div>
<div th:if="${themeConfigurations.musicPlayer} == '1'">
    <div id="player3" muted></div>
    <link rel="stylesheet" th:href="@{/blog/amaze/zplayer/css/zplayer.min.css}" />
    <script type="text/javascript" th:src="@{/blog/amaze//zplayer/js/zplayer.min.js}" ></script>
    <script>
        var zp3 = new zplayer({
            element: document.getElementById("player3"),
            autoPlay: 0,/*是否开启自动播放,默认false*/
            lrcStart: 0,/*是否开启歌词功能 ，默认false（为true时musics集合中需要传入lrc字段。）*/
            showLrc: 0,/*开启歌词功能后是否展示歌词内容 ，默认false*/
            fixed:1, /*是否固定在底部，默认false*/
            listFolded:1, /*列表是否折叠，默认false*/
            listMaxHeight:400, /*列表最大高度，默认240*/
            musics:[(${themeConfigurations.get('musicList')})]
        });
        zp3.init();
        // var firstPlay = false;
        // document.addEventListener('click', function() {
        //     if (!firstPlay) {
        //         zp3.play();
        //         firstPlay = true;
        //     }
        // });
    </script>
</div>
<footer th:replace="blog/amaze/footer::footer-fragment"></footer>
</body>
<script th:src="@{/blog/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/blog/plugins/search/search.js}"></script>
</html>